<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>19 - 排他思想</title>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <input type="button" value="按钮4">

    <script>

        // 程序中有一种编程逻辑思想:   排他思想
        // 不和群  ---> 除了他之外大家一起玩 (排他)


        // 排他思想: 
        // ☛ 所有的标签都设置一个统一的效果 (样式, 事件 ...)
        // ☛ 然后将自己排除在外 (给自己单独设置一个样式, 事件 ....)


        // 排他思想演示:
        // 1. 给每一个按钮注册点击事件
        // 2. 给当前点击的按钮改变文字颜色为红色
        // 3. 点击按钮,先给所有的标签文字都设置为黑色
        // 4. 当前按钮自己设置为红色

        let btns = document.querySelectorAll('input');
        for(let i = 0; i < btns.length; i++) {
            // 每一个按钮注册点击事件
            btns[i].addEventListener('click', function(){
                // 先遍历数组获取每一个标签,给每一个标签设置为黑色
                for(let j = 0; j < btns.length; j++) {
                    btns[j].style.color = '#000';
                }
                // 给当前按钮文字颜色设置为红色
                // btns[i].style.color = 'red';
                this.style.color = 'red';
            })
        }

        
    </script>
</body>
</html>